<template>
  <div class="setup">
    <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
    <main>
      <van-cell-group inset>
        <van-cell
          class="txt_title"
          title="选择线路"
          size="58"
          is-link
          icon="@\assets\image\icon\icon_3.png"
        />
        <van-cell class="txt_title" center title="急速模式">
          <template #right-icon>
            <van-switch v-model="isSpeed" size="24" inactive-color="#ebebeb" />
          </template>
        </van-cell>
      </van-cell-group>
      <p class="label">
        开启后，部分动效将被关闭，建议设备性能比较差的用户开启
      </p>
      <van-cell-group inset>
        <van-cell class="txt_title" center title="AI智能测距">
          <template #right-icon>
            <van-switch
              v-model="isRanging"
              size="24"
              inactive-color="#ebebeb"
            />
          </template>
        </van-cell>
        <van-cell class="txt_title" center title="护眼模式">
          <template #right-icon>
            <van-switch
              v-model="isEyecare"
              size="24"
              inactive-color="#ebebeb"
            />
          </template>
        </van-cell>
        <van-cell class="txt_title" center title="使用时长提醒">
          <template #right-icon>
            <van-switch v-model="isRemind" size="24" inactive-color="#ebebeb" />
          </template>
        </van-cell>
      </van-cell-group>
      <p class="label">开启后，每持续使用60分钟，会提示休息一下</p>
      <van-cell-group inset>
        <van-cell
          class="txt_title"
          title="关于我们"
          value="v3.19.1"
          is-link
          icon="@\assets\image\icon\icon_3.png"
        />
      </van-cell-group>
      <van-button
        class="out_login"
        type="primary"
        size="normal"
        round
        @click="outLogin"
        >退出登录</van-button
      >
    </main>
  </div>
</template>

<script>
import { NavBar, Toast, Cell, CellGroup, Switch, Button } from "vant";
export default {
  data() {
    return {
      isSpeed: false,
      isRanging: false,
      isEyecare: false,
      isRemind: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home/Mine");
    },
    outLogin() {
      localStorage.setItem("Ename", "user");
      localStorage.setItem("Cname", "新用户");
      localStorage.setItem("Birth", "2010-1-1");
      localStorage.setItem("isLogin", false);
      Toast("已退出登录");
      this.$router.go(-1);
    },
  },
  components: {
    "van-nav-bar": NavBar,
    "van-cell-group": CellGroup,
    "van-cell": Cell,
    "van-switch": Switch,
    "van-button": Button,
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/var.less";
.setup {
  background-color: #f5f5f5;
}
main {
  padding: 10px 0;
  p.label {
    .minor();
  }
  div.txt_title {
    font-weight: bold;
    // margin: 10px 0;
  }
  .out_login {
    width: 80%;
    left: 50%;
    margin-top: 15px;
    transform: translateX(-50%);
  }
}
/deep/ .van-switch__node {
  position: relative;
  &::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: radial-gradient(
      #ebebeb 30%,
      #fff 30%,
      #fff 50%,
      #ebebeb 50%
    );
    position: absolute;
  }
}
</style>
